import React, { useState, useRef } from 'react'
import './action.css'
import Title from '../../title'
import Nav1 from '../../nav/Nav';
import VideoPlayer from './videoplay';

function Action() {
    const items = [
        {
            text: '精选推荐',
            num:[
                '1111','aaaa','qqqqq','333'
            ],
            images: 'https://video.699pic.com/videos/27/06/87/a_66d58a9f27c6517252706871645.mp4',
            list: [
                'https://video.699pic.com/videos/60/43/61/a_66daa2096544917256043614172_10s.mp4',
                'https://video.699pic.com/videos/68/63/79/a_jgdSKUp1CWTj1725686379_10s.mp4',
                'https://video.699pic.com/videos/59/36/18/a_Vxt4q16JIchD1725593618_10s.mp4',
                'https://video.699pic.com/videos/90/16/01/a_sWJRGiseKQ1d1724901601_10s.mp4',
            ]
        },
        {
            text: '城市景观',
            num:[
                '2222','ssss','wwwww','ddd'
            ],
            images: 'https://video.699pic.com/videos/60/43/61/a_66daa2096544917256043614172_10s.mp4',
            list: [
                 'https://video.699pic.com/videos/27/06/87/a_66d58a9f27c6517252706871645.mp4',
                 'https://video.699pic.com/videos/59/36/18/a_Vxt4q16JIchD1725593618_10s.mp4',
                 'https://video.699pic.com/videos/90/16/01/a_sWJRGiseKQ1d1724901601_10s.mp4',
                 'https://video.699pic.com/videos/68/63/79/a_jgdSKUp1CWTj1725686379_10s.mp4',
            ]

        },
        {
            text: '自然风光',
            images: 'https://video.699pic.com/videos/68/63/79/a_jgdSKUp1CWTj1725686379_10s.mp4',
            list: [
                 'https://video.699pic.com/videos/27/06/87/a_66d58a9f27c6517252706871645.mp4',
                 'https://video.699pic.com/videos/59/36/18/a_Vxt4q16JIchD1725593618_10s.mp4',
                 'https://video.699pic.com/videos/68/63/79/a_jgdSKUp1CWTj1725686379_10s.mp4',
                 'https://video.699pic.com/videos/90/16/01/a_sWJRGiseKQ1d1724901601_10s.mp4',]
        },
        {
            text: '行业聚焦',
            images: 'https://video.699pic.com/videos/90/16/01/a_sWJRGiseKQ1d1724901601_10s.mp4',
            list: [
               'https://video.699pic.com/videos/59/36/18/a_Vxt4q16JIchD1725593618_10s.mp4',
               'https://video.699pic.com/videos/68/63/79/a_jgdSKUp1CWTj1725686379_10s.mp4',
               'https://video.699pic.com/videos/90/16/01/a_sWJRGiseKQ1d1724901601_10s.mp4',
               'https://video.699pic.com/videos/27/06/87/a_66d58a9f27c6517252706871645.mp4',
            ]

        },
    ];
    const [selectedIndex, setSelectedIndex] = useState<number>(0);
    const videoRef = useRef(null);
    //  当鼠标悬停在视频上时触发
    const handleMouseOver = () => {
        // videoRef.current 是否存在
        if (videoRef.current) {
              // 播放视频
            videoRef.current.play();
        }
    };
    // 鼠标离开
    const handleMouseOut = () => {
        if (videoRef.current) {
            videoRef.current.pause();
            // 将视频播放位置重置为起始位置
            videoRef.current.currentTime = 0; // Optional: Reset video to start
        }
    };

    // 给视频加一个key值
    const [videoKey, setVideoKey] = useState(0);
    // 鼠标滑过tab切换
const onSelect = (index) => {
    console.log('Selected Index:', index);
    setSelectedIndex(index);
    // 切换的时候 更新key值
    setVideoKey(prevKey => prevKey + 1); 
};

    return (
        <div className='act_box'>
            <div className='act_top'>
                {/* title */}
                <div className='act_title'>
                    <Title title='行业趋势-实拍' />
                </div>
                {/* nav */}
                <div className='act_nav'>
                    <Nav1 items={items}
                        onSelect={onSelect}
                        selectedIndex={selectedIndex}
                    />
                </div>
            </div>
            {/* 视频 */}
            <div className='act_viod'>
                {/* xiao */}
                <div className='xiao_viod' >
                    {items[selectedIndex].list.map((item, index) => (
                        <div key={index}>
                             <VideoPlayer key={videoKey}  src={item} />
                             {/* {item} */}
                        </div>
                       
                    ))}
                   
                </div>

                {/* da */}
                <div className='da_viod' 
                onMouseOver={handleMouseOver} 
                onMouseOut={handleMouseOut}
                >
                    {/* <video src={items[selectedIndex].images}></video>*/}
                    <div className='da_vid'>

                        <video key={videoKey} controls ref={videoRef} muted width="100%">
                            <source src={items[selectedIndex].images} type="video/mp4" />
                            Your browser does not support the video tag.
                        </video>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default Action